<template>
	<view class="my-page">
		<view class="main">
			<view class="userInfoBox">
				<view class="userinfo">
					<view class="avatar" @click="goUserInfo"></view>
					<!-- 	<view class="nameBox">
						<view class="login-reg">
							<span>登录/注册</span>
						</view>
					</view> -->
					<view class="nameBox">
						<view class="username" @click="goUserInfo">
							伐开心丶长命君
						</view>
						<view class="boxc">
							<view class="real-name-true" v-if="realName">
								<view class="icon" style="background-image:url('/static/my/real_name_true.png');">
								</view>
								<view class="text">
									已实名
								</view>
							</view>
							<view class="real-name-false" v-else @click="gorealName">
								<view class="icon" style="background-image:url('/static/my/real_name_false.png');">
								</view>
								<view class="text">
									未实名
								</view>
							</view>
							<view class="address" @click="address">
								收货地址>
							</view>
						</view>
					</view>
				</view>
				<view class="setting" @click="goSetting"></view>
			</view>
			<view class="toolBar">
				<toolBarVue></toolBarVue>
			</view>
			<view class="real-nameBox">
				<view class="real-nameTip">
					<view class="text" @click="onshimings">实名认证&nbsp;|&nbsp;实名认证可以保障您的资金安全</view>
					<view class="icon"></view>
				</view>
				<view class="myOrder">
					<mysMyOrderVue></mysMyOrderVue>
				</view>
			</view>
			<view class="adsBox"></view>
			<view class="service-center">
				<serviceCenterVue></serviceCenterVue>
			</view>
			<view class="phone-list">
				<phoneListVue :phoneList="phoneList"></phoneListVue>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Page
	} from "../../api/api.js"
	import toolBarVue from '../../common/my/toolBar/toolBar.vue'
	import mysMyOrderVue from '../../common/my/mys-my-order/mys-my-order.vue'
	import serviceCenterVue from '../../common/my/service-center/service-center.vue'
	import phoneListVue from '../../common/my/phone-list/phone-list.vue'
	export default {
		data() {
			return {
				//是否实名
				realName: false,
				phoneList: []
			}
		},
		components: {
			mysMyOrderVue,
			serviceCenterVue,
			phoneListVue,
			toolBarVue
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
			this.onpages()
		},
		methods: {
			async onpages() {
				let res = await Page()
				console.log(res, 'col');
				if (res.data.code == 1) {
					this.phoneList = res.data.data.clearance
				}
			},
			//个人信息
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/mys/individual/individual"
				})
			},
			//去实名
			gorealName() {
				uni.navigateTo({
					url: "/pages/mys/idcurds/idcurds"
				})
			},
			//实名认证
			onshimings() {
				uni.navigateTo({
					url: "/pages/mys/fFaces/fFaces"
				})
			},
			//设置
			goSetting() {
				uni.navigateTo({
					url: "/pages/mys/setup/setup"
				})
			},
			//收获地址
			address() {
				uni.navigateTo({
					url: "/pages/mys/address/address"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		width: 100vw;
		height: calc(100vh - 100rpx);
		display: flex;
		justify-content: center;
		overflow-y: scroll;
		background-color: #f6f6f6;

		.main {
			width: 95%;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow-y: scroll;

			.userInfoBox {
				width: 100%;
				height: 150rpx;
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.userinfo {
					width: 450rpx;
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						background-image: url("/static/avatar.png");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.nameBox {
						width: 280rpx;
						height: 110rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.login-reg {
							font-size: 40rpx;
							font-weight: bold;
							line-height: 100rpx;
						}

						.username {
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 40rpx;
							font-weight: bold;
						}

						.boxc {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.real-name-true {
								width: 130rpx;
								height: 45rpx;
								background-color: rgba(0, 255, 0, 0.09);
								border-radius: 30rpx;
								display: flex;
								justify-content: space-evenly;
								align-items: center;

								.icon {
									width: 35rpx;
									height: 35rpx;
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;

								}

								.text {
									font-size: 24rpx;
									color: #7de27b;
								}
							}

							.real-name-false {
								width: 130rpx;
								height: 45rpx;
								background-color: rgba(255, 0, 0, 0.09);
								border-radius: 30rpx;
								display: flex;
								justify-content: space-evenly;
								align-items: center;

								.icon {
									width: 35rpx;
									height: 35rpx;
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;

								}

								.text {
									font-size: 24rpx;
									color: #f12900;
								}
							}

							.address {
								font-size: 24rpx;
								color: #818181;
							}
						}
					}
				}

				.setting {
					width: 40rpx;
					height: 40rpx;
					background-image: url("/static/my/set.png");
					background-size: contain;
					margin-right: 30rpx;
				}
			}

			.toolBar {
				width: 95%;
				height: 150rpx;
				margin-top: 30rpx;
			}

			.real-nameBox {
				width: 100%;
				height: 350rpx;
				background-color: #fbe246;
				margin-top: 20rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.real-nameTip {
					width: 90%;
					height: 140rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text {
						font-size: 28rpx;
					}

					.icon {
						width: 25rpx;
						height: 25rpx;
						background-image: url("/static/my/right_black.svg");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
				}

				.myOrder {
					width: 100%;
					height: 300px;
					background-color: white;
					border-radius: 20rpx;
				}
			}

			.adsBox {
				width: 100%;
				min-height: 170rpx;
				background-image: url("/static/my/ads.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}

			.service-center {
				width: 100%;
				height: 600rpx;
				background-color: white;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}

			.phone-list {
				width: 100%;
				height: auto;
				margin-top: 20rpx;
			}
		}
	}
</style>